<template>
    <van-nav-bar title="商品详情" :fixed=true left-arrow @click-left="bindBack">
        <template #right>
            <div class="share" @click="showPopup"><van-icon id="shareIcon" name="share-o" size="20" /></div>
            <van-popup v-model:show="show" round position="bottom" close-icon="close">
                <div class="shareContent">
                    <p class="popuptitle">分享给朋友</p>
                    <div class="shareContentIcon" @click="prompt">
                        <span class="iconfont icon-weixin"></span>
                        <span class="iconfont icon-pengyouquan"></span>
                        <span class="iconfont icon-qq"></span>
                        <span class="iconfont icon-lianjie"></span>
                    </div>
                    <div class="shareContentText">
                        <p>微信</p>
                        <p>圈子</p>
                        <p>QQ</p>
                        <p>链接</p>
                    </div>
                    <van-button @click="closePopup" color="#999999" size="normal" round>取消</van-button>
                </div>
            </van-popup>
        </template>
    </van-nav-bar>
    <div class="content">
        <img :src="goods.picture" :alt="goods.picture" style="width: 100%;height: 230px;">
        <!-- 中间内容区域 -->
        <!-- 给文字区域设置整体内边距 -->
        <div style="padding: 0 10px;">
            <h3>{{ goods.product }}</h3>
            <div class="pricestyle">
                <span>￥{{ goods.price }}</span>
                <span>￥{{ goods.oldprice }}</span>
                <div class="collageDiv">
                    <van-button @click=" AddcollageGoodsList" color="linear-gradient(to right, #ff6034, #ee0a24)"
                        to="collage">拼团倒计时
                        <van-count-down style="color: #ffffff;" millisecond :time="time" format="HH:mm:ss:SS" />
                    </van-button>
                </div>
            </div>
            <van-cell-group>
                <van-cell title="分享总奖励：15%" />
                <van-cell class="iconcolor" icon="cash-on-deliver" title="满150减20" is-link></van-cell>
                <van-cell title="满88元免基础邮费" is-link />
                <van-cell title="最佳赏味期至︰2017年7月2日" />
                <van-cell style="font-size: 11px;font-weight: normal;"
                    title="注:本商品为临期促销商品,临期品保质期45天之内,不支持无理由迟换货，建议慎拍暇一" />
                <van-cell>
                    <ul>
                        <li>√ 全球直采</li>
                        <li>√ 原装进口</li>
                        <li>√ 极速发货</li>
                        <li>√ 超级便宜</li>
                    </ul>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 图片详情 -->
        <van-grid :column-num="1" v-for="item in goods.list" :key="item" style="padding: 0 10px;">
            <van-grid-item style="width: 100%;height:200px;">
                <!-- 字符串数组转化为字符 -->
                <img :src="JSON.parse(JSON.stringify(item))" style="width: 100%;height: 100%;" />
            </van-grid-item>
        </van-grid>
    </div>
    <van-action-bar>
        <van-action-bar-icon icon="home-o" to="home" text="首页" />
        <van-action-bar-icon icon="shopping-cart-o" to="cart" text="购物车" />
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon style="line-height: 0">
            <!-- <van-icon id="collectionIcon" name="like" :color="colorone ? '#ff5252' : '#646566'"
                @click="AddcollectionList(item.id)"></van-icon> -->
            <van-icon id="collectionIcon" name="like" :color="colorone ? '#ff5252' : '#646566'"
                @click="AddcollectionList"></van-icon>
        </van-action-bar-icon>
        <van-action-bar-button color="#ff5252" type="warning" @click="bindAddCart" text="加入购物车" />
    </van-action-bar>
</template>

<script setup lang="ts">
import { useDetail } from '@/hooks/detail'
const { bindBack, goods, bindAddCart, showPopup, show, closePopup, prompt, AddcollectionList, colorone, time, AddcollageGoodsList} = useDetail()

</script>

<style lang="scss" scoped>
.content {
    h3 {
        font-size: 16px;
        text-align: left;
    }

    color:#333333;
}

.pricestyle {
    position: relative;
    width: 100%;
    height: 25px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 6px;

    span:nth-child(1) {
        float: left;
        font-size: 24px;
        color: #ff5252;
    }

    span:nth-child(2) {
        padding-left: 5px;
        text-decoration: line-through;
        font-size: 16px;
    }

}

//组件class命名3个，需要在控制台调试
:deep(.van-grid-item) {
    .van-grid-item__content {
        padding: 3px;
    }
}

// van-cell组件自带内边距
.van-cell {
    font-weight: 700;
    padding: 5px 5px;
    border-bottom: 1px solid #cccccc;

    span {
        font-size: 15px;
    }
}

.iconcolor {
    :deep(.van-cell__left-icon) {
        color: #ff5252;
        font-size: 24px;
    }
}

:deep(ul) {
    display: flex;
    justify-content: space-around;
    font-weight: 700;
}

// 分享弹出框popup
.popuptitle {
    font-size: 16px;
}

.shareContent {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin: 0 auto;

    //内容盒子变为弹性盒子，进行布局

    .shareContentIcon {
        display: flex;
        justify-content: space-around;

        .icon-weixin,
        .icon-pengyouquan {
            color: #01d30d;
        }

        .icon-qq {
            color: #29afec;
        }

        .icon-lianjie {
            color: #666666;
        }

        // .icon-pengyouquan{
        //     color: #01d30d;
        // }
        .icon-weixin {
            color: #01d30d;
        }

        span {
            font-size: 35px;
            text-align: center;
            margin-top: 16px;
        }
    }

    .shareContentText {
        display: flex;
        justify-content: space-around;

        p {
            display: block;
            padding-left: -3px;
        }
    }

}

#collectionIcon {
    font-size: 30px;
}

.collageDiv {
    position: absolute;
    top: -20px;
    left: 245px;
    bottom: 30px;

    // .van-button {}
}
</style>